<template>
  <div class="comPage">
    <el-form
      :inline="true"
      :model="formInline"
      label-position="right"
      label-width="auto"
      class="formALL"
      :rules="rules"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item
            label="医生头像："
            :rules="[{ required: true, message: '', trigger: 'blur' }]"
          >
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="formInline.imageUrl" :src="formInline.imageUrl" class="avatar" />
              <div class="upLoadImg">
                <img class="addImg" src="/src/assets/addIm g.png" alt="" />
                <div class="title">上传图片</div>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="身份证正反面：">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="formInline.imageUrl" :src="formInline.imageUrl" class="avatar" />
              <div class="upLoadImg">
                <img class="addImg" src="/src/assets/addIm g.png" alt="" />
                <div class="title">人物面上传</div>
              </div>
            </el-upload>
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              style="margin-left: 20px"
            >
              <img v-if="formInline.imageUrl" :src="formInline.imageUrl" class="avatar" />
              <div class="upLoadImg">
                <img class="addImg" src="/src/assets/addIm g.png" alt="" />
                <div class="title">国徽面上传</div>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            label="医生姓名："
            :rules="[{ required: true, message: '', trigger: 'blur' }]"
          >
            <el-input v-model="formInline.name" placeholder="请输入医生姓名" clearable />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            label="医生手机号："
            :rules="[{ required: true, message: '', trigger: 'blur' }]"
          >
            <el-input v-model="formInline.name" placeholder="请输入医生手机号" clearable />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="CA认证姓名：">
            <el-input v-model="formInline.name" placeholder="请输入CA认证姓名" clearable />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="CA认证手机号：">
            <el-input v-model="formInline.name" placeholder="请输入CA签名手机号" clearable />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            label="证件类型："
            :rules="[{ required: true, message: '', trigger: 'blur' }]"
          >
            <el-select v-model="formInline.lineType" placeholder="请选择证件类型" clearable>
              <el-option label="线上" value="0" />
              <el-option label="线下" value="1" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            label="证件号码："
            :rules="[{ required: true, message: '', trigger: 'blur' }]"
          >
            <el-input v-model="formInline.name" placeholder="请输入证件号码" clearable />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="临床工作年限：">
            <el-input v-model="formInline.name" placeholder="请输入临床工作年限" clearable />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="民族：" :rules="[{ required: true, message: '', trigger: 'blur' }]">
            <el-select v-model="formInline.lineType" placeholder="请选择民族" clearable>
              <el-option label="线上" value="0" />
              <el-option label="线下" value="1" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            label="医生职称："
            :rules="[{ required: true, message: '', trigger: 'blur' }]"
          >
            <el-select v-model="formInline.lineType" placeholder="请选择医生职称" clearable>
              <el-option label="线上" value="0" />
              <el-option label="线下" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="所属医院："
            :rules="[{ required: true, message: '', trigger: 'blur' }]"
          >
            <el-input v-model="formInline.name" placeholder="请选择所属医院" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="科室：" :rules="[{ required: true, message: '', trigger: 'blur' }]">
            <el-select
              v-model="formInline.lineType"
              placeholder="请选择所属一级科室"
              clearable
              style="width: 180px"
            >
              <el-option label="线上" value="0" />
              <el-option label="线下" value="1" />
            </el-select>
            <el-select
              style="width: 180px; margin-left: 10px"
              v-model="formInline.lineType"
              placeholder="请选择所属二级科室"
              clearable
            >
              <el-option label="线上" value="0" />
              <el-option label="线下" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属诊疗科目：">
            <el-select v-model="formInline.lineType" placeholder="请选择所属诊疗科目" clearable>
              <el-option label="线上" value="0" />
              <el-option label="线下" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <!--参数名待定-->
          <el-form-item
            label="医生执业类型："
            :rules="[{ required: true, message: '', trigger: 'blur' }]"
          >
            <el-radio-group v-model="formInline.text1">
              <el-radio value="0">中西医</el-radio>
              <el-radio value="1">中医</el-radio>
              <el-radio value="2">西医</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="是否肿瘤："
            :rules="[{ required: true, message: '', trigger: 'blur' }]"
          >
            <el-radio-group v-model="formInline.text2">
              <el-radio value="0">是</el-radio>
              <el-radio value="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="所属线上机构："
            :rules="[{ required: true, message: '', trigger: 'blur' }]"
          >
            <el-input
              style="width: 180px"
              v-model="formInline.name"
              placeholder="请选择线上机构"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="归属平台："
            :rules="[{ required: true, message: '', trigger: 'blur' }]"
          >
            <el-select v-model="formInline.lineType" placeholder="请选择归属平台" clearable>
              <el-option label="线上" value="0" />
              <el-option label="线下" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="所属互联网医院："
            :rules="[{ required: true, message: '', trigger: 'blur' }]"
          >
            <el-select v-model="formInline.lineType" placeholder="请选择所属互联网医院" clearable>
              <el-option label="线上" value="0" />
              <el-option label="线下" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="默认互联网医院："
            :rules="[{ required: true, message: '', trigger: 'blur' }]"
          >
            <el-select v-model="formInline.lineType" placeholder="请选择默认互联网医院" clearable>
              <el-option label="线上" value="0" />
              <el-option label="线下" value="1" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="HIS编码：">
            <el-input v-model="formInline.name" placeholder="请输入HIS编码" clearable />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="HIS科室名称：">
            <el-input v-model="formInline.name" placeholder="请输入HIS科室名称" clearable />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="HIS科室编码：">
            <el-input v-model="formInline.name" placeholder="请输入HIS科室编码" clearable />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="医生标签：">
            <el-input v-model="formInline.name" placeholder="请输入医生标签" clearable />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="监管头像：">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="formInline.imageUrl" :src="formInline.imageUrl" class="avatar" />
              <div class="upLoadImg">
                <img class="addImg" src="/src/assets/addIm g.png" alt="" />
                <div class="title">上传图片</div>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="业务类型：">
            <el-select
              v-model="formInline.lineType"
              placeholder="请选择证件类型"
              clearable
              style="width: 600px"
            >
              <el-option label="线上" value="0" />
              <el-option label="线下" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script setup>
import {
  ElForm,
  ElInput,
  ElRow,
  ElCol,
  ElFormItem,
  ElSelect,
  ElOption,
  ElRadioGroup,
  ElRadio,
  ElUpload
} from 'element-plus'
import { ref, reactive, toRaw } from 'vue'

// 获取实例的引用，用于调用upload1.submit进行手动上传
const formInline = reactive({
  text1: '0'
})
const formSize = ref('default')
const imageUrl = ref('')
</script>

<style lang="less" scoped>
::v-deep(.el-input) {
  width: 600px;
  height: 40px;
}

::v-deep(.el-select) {
  width: 600px;
}

::v-deep(.el-select__wrapper) {
  height: 40px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

//上传的样式
.upLoadImg {
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  padding: 10px 15px;
  text-align: center;
  width: 120px;

  .title {
    font-size: 12px;
    color: #8c939d;
  }

  .addImg {
    width: 40px;
    height: 40px;
  }
}
</style>
